import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {Modal, ModalBody, ModalHeader, ModalFooter, Col, Row, Button} from "reactstrap";
import {setFieldData} from "../../../../../../redux/actions/helper";
import Select from "react-select";
import {SET_GUEST_FIELD} from "../../../../../../redux/constants/eventDetail/tabGuests";
import {deleteGuest, getGuest, storeGuest, updateGuest} from "../../../../../../redux/actions/eventDetail/tabGuests";
import NumericInput from "react-numeric-input";

const AddGuestForm = props => {
  const {params, guest, guest_type, ticket_type, zone_type, eventId} = props
  const {setFieldData, getGuest, updateGuest, storeGuest, deleteGuest} = props
  const [nameValid, setNameValid] = useState(false)

  useEffect(() => {
    if (params.isOpenModal && params.guest_id)
      getGuest(params.guest_id)
    else if (params.isOpenModal) {
      setFieldData(SET_GUEST_FIELD, 'guest', {
        name: '',
        phone: '',
        status: false,
        tickets: 0,
        description: '',
        guest_id: guest_type[0].id || null,
        ticket_id: ticket_type[0].id || null,
        zone_id: zone_type[0].id || null,
        guest: guest_type[0] || {},
        ticket: ticket_type[0] || {},
        zone: zone_type[0] || {},
      })
    }

    if (!params.isOpenModal) {
      setFieldData(SET_GUEST_FIELD, 'guest', {})
      setFieldData(SET_GUEST_FIELD, 'params', {...params, guest_id: null})
    }

    setNameValid(false)
  }, [params.isOpenModal]);


  const mobileStyle = {
    wrap: {
      background: "#E2E2E2",
      fontSize: 14
    },
    "input.mobile": {
      color: "5f5f5f",
      padding: "0",
      border: 0,
      display: "block",
      fontWeight: 400,
      backgroundColor: "#f8f8f8",
      height: "26px"
    },
    "input:focus": {
      outline: "none"
    },
    arrowUp: {
      borderBottomColor: "#fff"
    },
    arrowDown: {
      borderTopColor: "#fff"
    },
    plus: {
      background: "white"
    },
    minus: {
      background: "white"
    },
    "btnUp.mobile": {
      background: "#7367F0",
      borderRadius: "5px",
      height: "22px",
      width: "22px",
      top: "2px",
      cursor: "pointer"
    },
    "btnDown.mobile": {
      background: "#7367F0",
      borderRadius: "5px",
      height: "22px",
      width: "22px",
      top: "2px",
      cursor: "pointer"
    }
  }

  const Update = () => {
    if (guest.name) {
      updateGuest(guest, params.guest_id, eventId)
    } else {
      setNameValid(true)
    }
  }

  const Store = () => {
    if (guest.name) {
      storeGuest(guest, eventId)
    } else {
      setNameValid(true)
    }
  }

  return (
    <Modal
      isOpen={params.isOpenModal}
      toggle={() => setFieldData(SET_GUEST_FIELD, 'params', {...params, guest_id: null, isOpenModal: false})}
      className="modal-dialog-centered modal-lg"
    >
      <ModalHeader
        toggle={() => setFieldData(SET_GUEST_FIELD, 'params', {...params, guest_id: null, isOpenModal: false})}>
        {params.guest_id ? 'Редактировать гостя' : 'Добавить гостя'}
      </ModalHeader>
      <ModalBody className="modal-dialog-centered">
        <div className="w-100">
          <Row className="mt-1">
            <Col lg={3} className="align-self-center">
              Имя Фамилия
            </Col>
            <Col lg={9} className="align-self-center">
              <input id="name"
                     onChange={e => {
                       setNameValid(false)
                       setFieldData(SET_GUEST_FIELD, 'guest', {...guest, name: e.target.value})
                     }}
                     value={guest.name || ''}
                     className={`guest-item guest-item-input ${nameValid ? 'custom-input-invalid' : ''}`}/>
            </Col>
          </Row>
          <Row className="mt-1">
            <Col lg={3} className="align-self-center">
              Телефон
            </Col>
            <Col lg={9} className="align-self-center">
              <input id="phone"
                     placeholder={'+7(__)___-__-__'}
                     onChange={e => {
                       setNameValid(false)
                       setFieldData(SET_GUEST_FIELD, 'guest', {...guest, phone: e.target.value})
                     }}
                     value={guest.phone || ''}
                     className={`guest-item guest-item-input`}/>
            </Col>
          </Row>
          <Row className="mt-1">
            <Col lg={3}>
              Комментарий
            </Col>
            <Col lg={9} className="align-self-center">
              <textarea
                onChange={e => setFieldData(SET_GUEST_FIELD, 'guest', {...guest, description: e.target.value})}
                value={guest.description || ''}
                className={`guest-item guest-item-input guest-item-description`}
              />
            </Col>
          </Row>

          <hr className="mt-4 mb-1"/>

          <p className="bold font-medium-3">Билеты</p>

          <Row className="mt-1">
            <Col lg={3} className="align-self-center">
              Тип гостя
            </Col>
            <Col lg={6} className="align-self-center">
              <Select
                className={`schedule-item schedule-input-select`}
                classNamePrefix="dark_select"
                value={guest.guest && {value: guest.guest.id, label: guest.guest.name}}
                options={guest_type.map(value => {
                  return {
                    ...value,
                    value: value.id,
                    label: value.name
                  }
                })}
                isSearchable={false}
                onChange={e => setFieldData(SET_GUEST_FIELD, 'guest', {...guest, guest_id: e.id, guest: e})}
              />
            </Col>
          </Row>

          <Row className="mt-1">
            <Col lg={3} className="align-self-center">
              Тип билета
            </Col>
            <Col lg={6} className="align-self-center">
              <Select
                className={`schedule-item schedule-input-select`}
                classNamePrefix="dark_select"
                value={guest.ticket && {value: guest.ticket.id, label: guest.ticket.name}}
                options={ticket_type.map(value => {
                  return {
                    ...value,
                    value: value.id,
                    label: value.name
                  }
                })}
                isSearchable={false}
                onChange={e => setFieldData(SET_GUEST_FIELD, 'guest', {...guest, ticket_id: e.id, ticket: e})}
              />
            </Col>
          </Row>

          <Row className="mt-1">
            <Col lg={3} className="align-self-center">
              Зона
            </Col>
            <Col lg={6} className="align-self-center">
              <Select
                className={`schedule-item schedule-input-select`}
                classNamePrefix="dark_select"
                value={guest.zone && {value: guest.zone.id, label: guest.zone.name}}
                options={zone_type.map(value => {
                  return {
                    ...value,
                    value: value.id,
                    label: value.name
                  }
                })}
                isSearchable={false}
                onChange={e => setFieldData(SET_GUEST_FIELD, 'guest', {...guest, zone_id: e.id, zone: e})}
              />
            </Col>
          </Row>

          <Row className="mt-3">
            <Col lg={3} className="align-self-center">
              Кол-во билетов
            </Col>
            <Col lg={6} className="align-self-center">
              <NumericInput
                min={0}
                value={guest.tickets || 0}
                onChange={e => setFieldData(SET_GUEST_FIELD, 'guest', {...guest, tickets: e})}
                mobile
                style={mobileStyle}
              />
            </Col>
          </Row>
        </div>
      </ModalBody>
      <ModalFooter>
        {params.guest_id ?
          <>
            <Button.Ripple
              color="danger"
              className="btn-uppercase"
              onClick={() => deleteGuest(params.guest_id)}
            >
              Удалить
            </Button.Ripple>
            <Button.Ripple
              color="primary"
              className="btn-uppercase"
              onClick={Update}
            >
              Обновить
            </Button.Ripple>
          </>
          :
          <>
            <Button.Ripple
              color="danger"
              className="btn-uppercase"
              onClick={() => setFieldData(SET_GUEST_FIELD, 'params', {...params, guest_id: null, isOpenModal: false})}
            >
              Отмена
            </Button.Ripple>
            <Button.Ripple
              color="primary"
              className="btn-uppercase"
              onClick={Store}
            >
              Добавить
            </Button.Ripple>
          </>
        }

      </ModalFooter>
    </Modal>
  )

}

const mapStateToProps = state => ({
  params: state.eventGuests.params,
  guest: state.eventGuests.guest,
  guest_type: state.eventGuests.guest_type,
  ticket_type: state.eventGuests.ticket_type,
  zone_type: state.eventGuests.zone_type,
});

export default connect(mapStateToProps, {setFieldData, getGuest, updateGuest, storeGuest, deleteGuest})(AddGuestForm)
